import { Component, Emit } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { getChannelList } from '@/api/company'
import { ChannelTypeCnEnum } from '@/const/enum'
import type { ChannelDto } from '@/api/company/types'
import { Button, Image, Input, Tooltip } from 'ant-design-vue'
import IconChannel from '@/assets/channel-management/icon-channel.png'
import { MoreOutlined, SearchOutlined } from '@ant-design/icons-vue'
import renderModal, { getModelValue, initModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import { addChannel, editChannel } from '@/api/channel'


@Component
export class ChannelGroup extends Render {

    @Emit('click')
    handleClick() {
        return this.activeId
    }

    channelList  = [] as ChannelDto[]

    searchValue = ''

    activeId = 0

    curData = {} as ChannelDto

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '新增渠道组',
            width: '400px',
            theme: 'light',
            show: false,
            labelCol: {
                style: {
                    width: '7em'
                }
            },
            items: {
                name:{ 
                    name: '渠道组名称',
                    element: 'input',
                    placeholder: '请输入',
                    required: true,
                },
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)

                if(this.curData?.id) {
                    await editChannel({
                        id: this.curData.id,
                        name: data.name
                    })
                } else {
                    await addChannel({
                        ...data,
                        auditStatus: 1,
                        type: ChannelTypeCnEnum.系统渠道
                    })
                }
                this.formConfig.show = false
                this.initData()
            },
            cancel: () => {
                this.formConfig.show = false
            },
        } as FormModalDto
    } 

    onAdd() {
        this.curData = {} as ChannelDto
        this.formConfig.title= '新增渠道组'
        this.formConfig.show = true
    }

    onShowEdit(data: ChannelDto) {
        console.log(data)
        this.curData = data
        this.formConfig.title= '修改渠道组'
        this.formConfig.show = true
        initModelValue(this.formConfig, data)
    }

    async initData() {
        const res = await getChannelList()
        this.channelList = res
        this.activeId = this.channelList?.[0]?.id
        this.handleClick()
    }

    onChangeActive(id: number) {
        this.activeId = id
        this.handleClick()
    }

    onMounted() { 
        this.initData()
    }

    render() {
        return <div class="p-16px border-r-1 border-r-solid flex flex-col h-full">
            <div class="flex-1">

                <Input class="mb-16px" v-model:value={this.searchValue} placeholder="搜索渠道" v-slots={{
                    prefix: () => {
                        return <SearchOutlined/>
                    }
                }}/>
                {
                    this.channelList.map(i => {
                        return <div onClick={this.onChangeActive.bind(this, i.id)} class={`flex cursor-pointer justify-between items-center rounded-sm px-16px py-8px ${this.activeId === i.id ? 'bg-blue-300': ''}`}>
                            <div class="flex items-center">
                                <Image width={16} height={16} preview={false} src={IconChannel}></Image>
                                <span class="ml-8px font-bold">{i.name}</span>
                            </div>
                            <div>
                                <Tooltip v-slots={{
                                    title: () => {
                                        return <div class="text-center">
                                            <div onClick={this.onShowEdit.bind(this, i)} class="cursor-pointer px-8px py-4px">编辑</div>
                                            <div class="cursor-pointer px-8px py-4px">新增收款账户</div>
                                            {/* <div class="cursor-pointer px-8px py-4px text-error">删除</div> */}
                                        </div>
                                    }
                                }}>
                                    <MoreOutlined />
                                </Tooltip>
                            </div>
                        </div>
                    })
                }
            </div>
            <div class="pt-22px border-t-1 border-t-solid">
                <Button class="w-full" onClick={this.onAdd}>新增渠道组</Button>
            </div>
            {renderModal(this.formConfig)}
        </div>
    }
}

export default toNative<{}, {click: (activeId: number) => void}>(ChannelGroup)